<template>
	<div class="my">
		<van-cell-group v-if="user">
		  <van-cell title="单元格" value="内容" center class="base-info" :border="false">
				<van-image round slot="icon" :src="currentUser.photo"  class="img"/>
				<div slot="title" class="name">{{currentUser.name}}</div>
				<van-button size="small" round class="update-btn" to="/user/profile">编辑资料</van-button>
			</van-cell>
			<van-grid class="no" :border="false">
			  <van-grid-item>
					<div slot="text" class="text-wrap">
						<div class="span">{{currentUser.art_count}}</div>
						<div class="text">头条</div>
					</div>
				</van-grid-item>
			  <van-grid-item>
			  	<div slot="text" class="text-wrap">
			  		<div class="span">{{currentUser.follow_count}}</div>
			  		<div class="text">关注</div>
			  	</div>
			  </van-grid-item>
				<van-grid-item>
					<div slot="text" class="text-wrap">
						<div class="span">{{currentUser.fans_count}}</div>
						<div class="text">粉丝</div>
					</div>
				</van-grid-item>
				<van-grid-item>
					<div slot="text" class="text-wrap">
						<div class="span">{{currentUser.like_count}}</div>
						<div class="text">获赞</div>
					</div>
				</van-grid-item>
			</van-grid>
		</van-cell-group>
		
		<div class="not-login" v-else>
			<div class="notext" @click="$router.push('/login')">登录/注册</div>
		</div>
		
		<van-grid :column-num="2" class="nav-grid">
		  <van-grid-item icon="star-o" text="收藏"   class="nav-grid-item"/>
		  <van-grid-item icon="clock-o" text="历史"  class="nav-grid-item"/>
		</van-grid>
		<van-cell title="消息通知" is-link to=" " class="lo"/>
		<van-cell title="小智同学" is-link to="/user/chat" />
		<van-cell 
		  title="退出登录" 
		  class="logout-cell lo"
			v-if="user"
			@click="onLogout"
			/>
	</div>
</template>

<script>
	import {mapState} from 'vuex'
	import {getCurrentUser} from '../../utils/user.js'
	
	export default {
		name: 'My',
		data() {
			return {
				currentUser: {}
			}
		},
		computed:{
			...mapState(['user'])
		},
		methods: {
			onLogout() {
				//提示用户确认退出
				this.$dialog.confirm({
				  title: '退出提示',
				  message: '确认退出吗？'
				})
				  .then(() => {
				    this.$store.commit('setUser',null)
				  })
				  .catch(() => {
				    // on cancel
				  });
			},
			async loadCurrentUser() {
				const {data} = await getCurrentUser()
				this.currentUser = data.data
			}
		},
		created() {
			this.loadCurrentUser()
		}
	}
</script>

<style scoped>
	.base-info {
		height: 115px;
		box-sizing: border-box;
		padding-top: 38px;
		padding-bottom: 11px;
		background-color: #3296FA;
	}
	/deep/.van-grid-item__content {
		background-color: unset;
	}
	/deep/.no {
		background-color: #3296FA;
		height: 65px;
	}
	
	.name {
		color: #fff;
		font-size: 15px;
	}
	.update-btn {
		font-size: 10px;
		color: #666;
		height: 16px;
	}
	.text-wrap {
		text-align: center;
	}
	.span {
		font-size: 18px;
		color: #fff;
		margin-top: 5px;
	}
	.text {
		font-size: 10px;
		color: #fff;
	}
	.nav-grid {
		margin-top: 10px;
	}
	.nav-grid-item {
		height: 70px;
		
	}
	.logout-cell {
		text-align: center;
		color: #d86262;
		
	}
	.lo {
		border-top: 5px solid #f6f6f6;
	}
	
	.not-login {
		height: 160px;
		background-color: #3296FA;
	}
	.notext {
		text-align: center;
		line-height: 160px;
		color: #fff;
		font-size: 18px;
		
	}
	.img {
		width: 66px;
		height: 66px;
		border: 1px solid #fff;
		box-sizing: border-box;
		margin-right: 11px;
	}
</style>
